<template>
	<view class="page">
		<hx-navbar title="基础信息" :fixed="true" bar-placeholder="hidden" :transparent="(showLanguagePopup||showlecturePhasePopup||showlectureModePopup||showlectureLanguagePopup)?'show':'auto'" 
			:background-color="[127, 74, 255,1]" color="#ffffff" @bindBack="bindBack"
			:pageScroll.sync="scrollData"/>
			<view class="information-bg" :style="{'padding-top':statusBarHeight+16+'px'}">
				<view class="content">
					<!-- 基础信息 -->
					<view class="basic">
						<!-- 授课语种 -->
						<view class="dis-flex common-box flex-y-center">
							<view class="l-title f_32 navy_blue f_semibold">授课语种</view>
							<view class="dis-flex flex-x-between flex-y-center b-b-ededed flex-box right-box" @click="closeLanguagePopup">
								<text class="f_32 f_medium" :class="languageIndex==-1?'gery1':'navy_blue'">{{languageIndex==-1?'请选择':languageList[languageIndex].title}}</text>
								<image :src="imgPrefix('/static/image/teacher/arrows.png')" mode=""></image>
							</view>
						</view>
						<!-- 语言水平 -->
						<view class="language-level-box" v-if="languageLevel.length>0">
							<view class="title navy_blue f_32 f_semibold">语言水平</view>
							<view class=" dis-flex item-box">
								<view v-for="(level_item,level_index) in languageLevel" :key="level_index" :class="['dis-flex','flex-y-center','flex-x-center',languageLevelIndex==level_index?'active':'acquiescence']"
								class="item" @click="languageLevelWay(level_index)">
									<text class="f_32 f_medium">{{level_item.title}}</text>
									<image v-if="languageLevelIndex==level_index" :src="imgPrefix('/static/image/teacher/check.png')" mode=""></image>
								</view>
							</view>
						</view>
						<view class="b-b-ededed m_r_32 m_l_32"></view>
						<!-- 授课阶段 -->
						<view class="dis-flex common-box flex-y-center">
							<view class="l-title f_32 navy_blue f_semibold">授课阶段</view>
							<view class="dis-flex flex-x-between flex-y-center b-b-ededed flex-box right-box" @click="closelecturePhasePopup">
								<text class="f_32 f_medium" :class="selectList[0]==''?'gery1':'navy_blue'">{{selectList[0]==''?'请选择':selectList[0]}}</text>
								<image :src="imgPrefix('/static/image/teacher/arrows.png')"></image>
							</view>
						</view>
						<!-- 授课方式 -->
						<view class="dis-flex common-box flex-y-center">
							<view class="l-title f_32 navy_blue f_semibold">授课方式</view>
							<view class="dis-flex flex-x-between flex-y-center b-b-ededed flex-box right-box" @click="closelectureModePopup">
								<text class="f_32 f_medium" :class="selectList[1]==''?'gery1':'navy_blue'">{{selectList[1]==''?'请选择':selectList[1]}}</text>
								<image :src="imgPrefix('/static/image/teacher/arrows.png')"></image>
							</view>
						</view>
						<!-- 授课语言 -->
						<view class="dis-flex common-box flex-y-center">
							<view class="l-title f_32 navy_blue f_semibold">授课语言</view>
							<view class="dis-flex flex-x-between flex-y-center b-b-ededed flex-box right-box" @click="closelectureLanguagePopup">
								<text class="f_32 f_medium" :class="selectList[2]==''?'gery1':'navy_blue'">{{selectList[2]==''?'请选择':selectList[2]}}</text>
								<image :src="imgPrefix('/static/image/teacher/arrows.png')"></image>
							</view>
						</view>
						<!-- 线下旁听 -->
						<view class="dis-flex common-box flex-y-center">
							<view class="l-title f_32 navy_blue f_semibold">线下旁听</view>
							<view class="dis-flex flex-x-between flex-y-center b-b-ededed flex-box right-box" @click="auditWay()">
								<text class="f_28 gery1 f_medium">允许家长旁听</text>
								<image class="arrows_icon" :src="audit?imgPrefix('/static/image/teacher/status_1.png'):imgPrefix('/static/image/teacher/status_0.png')" mode=""></image>
							</view>
						</view>
						<!-- 所选地址 -->
						<view class="dis-flex common-box">
							<view class="l-title f_32 navy_blue f_semibold">所在地址</view>
								<view class="dis-flex flex-x-between flex-box gery1 f_28 f_medium right-padding" @click.stop="pageTo('/pages/teacher/choose_location/index',{latitude:latitude,longitude:longitude,address:address})">
									<block v-if="address==''&&addressName==''">
										请选择
										<image lazy-load class="address-next" :src="imgPrefix('/static/image/teacher/arrows.png')"></image>
									</block>
									<block v-else>
										<view class="">{{address}}</view>
										<!-- <view class="">{{addressName}}</view> -->
									</block>
								</view>
						</view>
						<!-- 详细地址 -->
						<view class="dis-flex common-box flex-y-center">
							<view class="l-title f_32 f_medium navy_blue f_semibold">详细地址</view>
							<input type="text" v-model="detailAddress" class="f_28" placeholder-class="f_28" placeholder="请输入详细地址" />
						</view>
					</view>
					<view class="btn-box">
						<view class="btn t-c" @tap="navigateBack">
							确认
						</view>
					</view>
				</view>
			</view>
			<!-- 授课语种 start  -->
			<view class="">
				<zan-popup :show="showLanguagePopup" type="bottom" @close="closeLanguagePopup">
					<view class="commonPopup">
						<view class="title t-c violet1">选择授课语种</view>
						<view v-for="(language_item,language_index) in languageList" :key="language_index" @click="chooseLanguage(language_index)" class="item dis-flex flex-y-center flex-x-between t-c">
							<view class="">{{language_item.title}}</view>
							<view class=""><image :src="languageIndex==language_index?imgPrefix('/static/image/teacher/basic_information_status1.png'):imgPrefix('/static/image/teacher/status_0.png')" mode=""></image></view>
						</view>
						<view class="cancel t-c violet1 f_34" @click="closeLanguagePopup">取消</view>
					</view>
				</zan-popup>
			</view>
			<!-- 授课语种 end -->
			<!-- 授课阶段start  -->
				<zan-popup :show="showlecturePhasePopup" type="bottom" @close="closelecturePhasePopup">
					<view class="commonPopup">
						<view class="title t-c violet1">
							<text class="f_34 violet1">选择授课阶段</text><text class="f_26 gery">(最多可选3项)</text>
							<image @click="closelecturePhasePopup" :src="imgPrefix('/static/image/icon/address_close.png')" mode=""></image>
						</view>
						<view v-for="(lecturePhase_item,lecturePhase_index) in lecturePhaseList" :key="lecturePhase_index" @click="chooselecturePhase(lecturePhase_index)" class="item dis-flex flex-y-center flex-x-between t-c">
							<view class="">{{lecturePhase_item.title}}</view>
							<view class=""><image :src="lecturePhase_item.status?imgPrefix('/static/image/teacher/basic_information_status1.png'):imgPrefix('/static/image/teacher/status_0.png')" mode=""></image></view>
						</view>
						<view class="cancel t-c violet1 f_34" @click="closelecturePhasePopup">确定</view>
					</view>
				</zan-popup>
			<!-- 授课阶段 end -->
			<!-- 授课方式start  -->
				<zan-popup :show="showlectureModePopup" type="bottom" @close="closelectureModePopup">
					<view class="commonPopup">
						<view class="title t-c violet1">
							<text class="f_34 violet1">选择授课方式</text><text class="f_26 gery">(多选)</text>
							<image @click="closelectureModePopup" :src="imgPrefix('/static/image/icon/address_close.png')" mode=""></image>
						</view>
						<view v-for="(lectureMode_item,lectureMode_index) in lectureModeList" :key="lectureMode_index" @click="chooselectureMode(lectureMode_index)" class="item dis-flex flex-y-center flex-x-between t-c">
							<view class="">{{lectureMode_item.title}}</view>
							<view class=""><image :src="lectureMode_item.status?imgPrefix('/static/image/teacher/basic_information_status1.png'):imgPrefix('/static/image/teacher/status_0.png')" mode=""></image></view>
						</view>
						<view class="cancel t-c violet1 f_34" @click="closelectureModePopup">确定</view>
					</view>
				</zan-popup>
			<!-- 授课方式 end -->
			<!-- 授课语言start  -->
				<zan-popup :show="showlectureLanguagePopup" type="bottom" @close="closelectureLanguagePopup">
					<view class="commonPopup">
						<view class="title t-c violet1">
							<text class="f_34 violet1">选择授课方式</text><text class="f_26 gery">(多选)</text>
							<image @click="closelectureLanguagePopup" :src="imgPrefix('/static/image/icon/address_close.png')" mode=""></image>
						</view>
						<view v-for="(lectureLanguage_item,lectureLanguage_index) in lectureLanguageList" :key="lectureLanguage_index" @click="chooselectureLanguage(lectureLanguage_index)" class="item dis-flex flex-y-center flex-x-between t-c">
							<view class="">{{lectureLanguage_item.title}}</view>
							<view class=""><image :src="lectureLanguage_item.status?imgPrefix('/static/image/teacher/basic_information_status1.png'):imgPrefix('/static/image/teacher/status_0.png')" mode=""></image></view>
						</view>
						<view class="cancel t-c violet1 f_34" @click="closelectureLanguagePopup">确定</view>
					</view>
				</zan-popup>
			<!-- 授课语言 end -->
		
	</view>
</template>

<script>
const app = getApp();
	import { commonMixinFun } from '@/static/mixins/common.js'; // 公共
import { statusBarHeight } from '@/static/mixins/statusBarHeight.js';
	import zanPopup from '@/components/popup/index.vue';
	import API from '@/static/api/index.js';
	export default {
		components: {
			zanPopup
		},
		mixins: [commonMixinFun,statusBarHeight],
		data() {
			return {
				id:'',
				scrollData:{},
				languageIndex:-1,//选中授课语种
				language_id:-1,
				languageList:[
					// {name:'日语',status:true},
				],//语种选择列表
				showLanguagePopup:false,//授课语种弹出层状态
				languageLevelIndex:-1,//语言水平选中下标
				languageLevel:[],//语言水平列表
				lecturePhaseList:[
					// {name:'幼稚园',status:false},
				],//授课阶段列表
				//0=两者皆可，1-教师上门，2-学生上门
				lectureModeList:[
					{title:'教师上门',status:false,type:1},
					{title:'学生上门',status:false,type:2},
				],//授课方式列表
				showlectureModePopup:false,//授课方式列表弹出层状态
				showlecturePhasePopup:false,//授课阶段列表弹出层状态
				lectureLanguageList:[
					// {name:'英语',status:false},
				],//授课语言
				showlectureLanguagePopup:false,//授课语言列表弹出层状态
				audit:false,//线下旁听
				showAddressPopup:false,//地址弹出层
				addressName:'',
				address:'',
				latitude:'',
				longitude:'',
				selectIdObj:{ // 传到上个页面时使用
					stage:[],//授课阶段
					classdata:0, // 授课方式:0=不限定,1=教师上门,2=学生上门
					speaking:[] // 授课语言
				},// 存储id
				stage:[],//授课阶段 上个页面传过来回显
				speaking:[],//授课语言 上个页面传过来回显
				language_grade_id:'',//语言水平
				classdata:-1,
				detailAddress:''//详细地址
			};
		},
		onLoad(option){
			if(option.hasOwnProperty('basics')&&decodeURIComponent(option.basics)!='{}'){
				let obj = JSON.parse(decodeURIComponent(option.basics))
				app._log(obj)
				if(obj.address.indexOf(' ')!=-1){
					this.address = obj.address.split(" ")[0];
					this.detailAddress=obj.address.split(" ")[1];
				}else{
					this.address = obj.address
				}
				this.audit = obj.offline==1;
				this.latitude = obj.latitude;
				this.longitude = obj.longitude;
				this.language_id = obj.language_id;
				this.stage=obj.stage?obj.stage.split(','):[];//授课阶段
				this.speaking=obj.speaking?obj.speaking.split(','):[];//授课语言
				if(obj.classdata==0){
					this.lectureModeList=[{title:'教师上门',status:true,type:1},{title:'学生上门',status:true,type:2}]
				}else{
					this.lectureModeList=[{title:'教师上门',status:obj.classdata==1,type:1},{title:'学生上门',status:obj.classdata==2,type:2}]
				}
				if(obj.hasOwnProperty('language_grade_id')){
					this.language_grade_id=obj.language_grade_id //语言水平
				}
			}
			   	//获取语种
			   	this._getTLanguageList()
			   	//获取授课阶段
			   	this._getLanguageStage()
			   	//授课语言
			   	this._getLanguageSpeaking()
		},
		watch:{
			languageList(val,oldVal){
				if(val.length>0){
					this.languageIndex = val.findIndex(o=>o.language_id==this.language_id)
				}
			}
		},
		computed:{
			selectList:function(){
				let arr = []
				let {lecturePhaseList,lectureModeList,lectureLanguageList}=this;
				let tempArr = lecturePhaseList.filter(o=>o.status==true);
				let selectArr = [];
				let selectArrId = [];
				tempArr.forEach(e=>{
					selectArr.push(e.title)
					selectArrId.push(e.stage_id)
				})
				this.selectIdObj.stage = selectArrId;
				let tempArr1 = lectureModeList.filter(o=>o.status==true);
				let selectArr1 = [];
				tempArr1.forEach(e=>{
					selectArr1.push(e.title)
				})
				let classdata = 0
				if(tempArr1.length==1){
					classdata = tempArr1[0].type
				}
				this.selectIdObj.classdata = classdata;
				let tempArr2 = lectureLanguageList.filter(o=>o.status==true);
				let selectArr2 = [];
				let selectArrId2 = [];
				tempArr2.forEach(e=>{
					selectArr2.push(e.title)
					selectArrId2.push(e.speaking_id)
				})
				this.selectIdObj.speaking = selectArrId2;
				arr.push(selectArr.join('、'))
				arr.push(selectArr1.join('、'))
				arr.push(selectArr2.join('、'))
				return arr;
			}
		},
		methods:{
			navigateBack(){
				let {languageIndex,languageList,languageLevel,languageLevelIndex,selectIdObj,audit,addressName,address,latitude,longitude,detailAddress,selectList}=this;
				app._log("detailAddress,,,,",detailAddress)
				if(languageIndex==-1){
					this.showToast('请选择授课语种')
				}else if(languageLevel.length>0&&languageLevelIndex==-1){
					this.showToast('请选择语言水平')
				}else if(selectList[0]==''){
					this.showToast('请选择授课阶段')
				}else if(selectList[1]==''){
					this.showToast('请选择授课方式')
				}else if(selectList[2]==''){
					this.showToast('请选择授课语言')
				}else if(address==''){
					this.showToast('请选择所在地址')
				}else {
				let obj = {
					address:address+" "+detailAddress,
					offline:audit?1:0,
					language_id:languageList[languageIndex].language_id,
					// addressName:'',
					latitude:latitude,
					longitude:longitude,
				}
				if(languageLevel.length>0){
					obj.language_grade_id=languageLevel[languageLevelIndex].language_grade_id;
				}
				obj = Object.assign(obj,selectIdObj)
				uni.$emit("setObj",{type:1,objList: obj});
				uni.navigateBack();
				}
			},
			bindBack() {
				uni.showModal({
					title: '退出提醒',
					content: '课程价格填写未保存，是否退出',
					confirmColor: '#000000',
					success: function(res) {
						if (res.confirm) {
							uni.navigateBack();
						}
					}
				});
			},
			//获取语种
			_getTLanguageList(){
				API.getTLanguageList().then(({code,data,msg})=>{
					if(code==1&&data.languages.length>0){
						for (let i = 0; i < data.languages.length; i++) {
							data.languages[i].status=false
						}
						this.languageList=data.languages;
						
						
						if(this.language_id!=''){ // 有默认选择语言的就去默认选中
							this.languageIndex=data.languages.findIndex(o=>o.language_id==this.language_id);
							if(this.language_grade_id!=''){//有默认选择水平id的就请求
								this._getLanguageGrade()
							}
						}
					}else{
						this.showToast(msg)
					}
				})
			},
			//获取语种选择数据
			chooseLanguage(index){
				this.languageIndex=index
				//获取语种水平
				this._getLanguageGrade()
				this.closeLanguagePopup()
			},
			//获取语种水平
			_getLanguageGrade(){
				let {languageList,languageIndex,language_grade_id} = this
				API.getLanguageGrade(languageList[languageIndex].language_id).then(({code,data,msg})=>{
					if(code==1){
						let {grade}=data;
						this.languageLevel=grade;
						if(grade.length>0&&language_grade_id!=''){ // 有语种等级和已选
							this.languageLevelIndex = grade.findIndex(o=>o.language_grade_id==language_grade_id)
						}
					}else{
						this.showToast(msg)
					}
				})
			},
			//获取授课阶段
			_getLanguageStage(){
				API.getLanguageStage().then(({msg,data,code})=>{
					let {stage}=data
					app._log(stage)
					if(code==1&&stage.length>0){
						let tempStage=this.stage
						for (let i = 0; i < stage.length; i++) {
							stage[i].status=tempStage.findIndex(o=>o==stage[i].stage_id)!=-1;
						}
						this.lecturePhaseList=stage;
						
					}else{
						this.showToast(msg||'获取授课阶段失败')
					}
				})
			},
			//授课阶段 
			chooselecturePhase(index){
				let {lecturePhaseList}=this;
				if(lecturePhaseList.filter(o=>o.status).length<3||lecturePhaseList[index].status){
					this.lecturePhaseList[index].status = !lecturePhaseList[index].status
				}
			},
			//授课方式
			chooselectureMode(index){
				let {lectureModeList}=this;
				this.lectureModeList[index].status = !lectureModeList[index].status
			},
			//获取授课语言
			_getLanguageSpeaking(){
				API.getLanguageSpeaking().then(({msg,data,code})=>{
					let {speaking}=data
					if(code==1&&speaking.length>0){
						let tempSpeakinge=this.speaking
						for (let i = 0; i < speaking.length; i++) {
							speaking[i].status=tempSpeakinge.findIndex(o=>o==speaking[i].speaking_id)!=-1;
						}
						this.lectureLanguageList=speaking
					}else{
						this.showToast(msg)
					}
				})
			},
			//授课语言
			chooselectureLanguage(index){
				let {lectureLanguageList}=this;
				this.lectureLanguageList[index].status = !lectureLanguageList[index].status
			},
			//语言水平tag切换
			languageLevelWay (index){
				this.languageLevelIndex=index 
			},
			//线下旁听状态
			auditWay(){
				this.audit=!this.audit
			},
			//授课语言 关闭弹出层
			closelectureLanguagePopup(delay = 0) {
				setTimeout(() => {
					this.showlectureLanguagePopup = !this.showlectureLanguagePopup ;
				}, delay);
			},
			//选择授课方式(多选)关闭弹出层
			closelectureModePopup(delay = 0) {
				setTimeout(() => {
					this.showlectureModePopup = !this.showlectureModePopup ;
				}, delay);
			},
			closeBalanceLowPopup(delay = 0) {
				setTimeout(() => {
					this.showAddressPopup = !this.showAddressPopup ;
				}, delay);
			},
			//获取语种选择  关闭弹出层
			closeLanguagePopup(delay = 0) {
				setTimeout(() => {
					this.showLanguagePopup = !this.showLanguagePopup ;
				}, delay);
			},
			//授课阶段  关闭弹出层
			closelecturePhasePopup(delay = 0) {
				setTimeout(() => {
					this.showlecturePhasePopup = !this.showlecturePhasePopup ;
				}, delay);
			},
			change_status(id,index){
				this.addressId=id
				this.addressIndex=index
				this.closeBalanceLowPopup()
			}, 
		},
		
		onPageScroll(e) {
			this.scrollData = e
		}
	}
</script>

<style lang="scss" scoped>
.b-b-ededed{
	border-bottom: 1px solid #ededed;
}
.ff6f03{
	color: #ff6f03;
}
.page{
	padding-bottom: 148rpx;
	.information-bg{
		background-image: linear-gradient(313deg, 
			#693ae6 0%, 
			#9564e6 100%);
			height: 126rpx;
			position: relative;
			padding-bottom: 95rpx;
	}
	.common-box{
		padding: 0 32rpx 0rpx 32rpx;
	}
	.content{
		width: 654rpx;
		position: absolute;
		border-bottom: 16rpx solid #f4f4f4;	
		margin: 0 48rpx;
		// 基础信息
		.basic{
			// padding: 0 32rpx 0rpx 32rpx;
			box-shadow: 0rpx 0rpx 40rpx 0rpx 
				rgba(0, 0, 0, 0.02);
			border-radius: 32rpx;
			background-color: #ffffff;
			.b-title{
				padding: 32rpx 0 26rpx 0;
			}
			.language-level-box{
				padding-bottom: 16rpx;
				
				.item-box{
					flex-wrap:wrap;
					padding: 0 22rpx;
				}
				.item{
					width: 30%;
					margin-bottom: 16rpx;
					// padding: 12rpx 0;
					height: 64rpx;
					text-align: center;
					color: rgba(37, 39, 72, 0.3);
					margin: 0 1.6% 16rpx;
				}
				.active{
					background-color: rgba(127, 74, 255, 0.1);
					border-radius: 12rpx;
					border: solid 1rpx #9254ff;
					position: relative;
					image{
						position: absolute;
						right: 0;
						bottom: 0;
						width: 36rpx;
						height: 36rpx;
					}
					text{
						color: #9254ff;
					}
				}
				.title{
					padding: 34rpx 32rpx 20rpx 32rpx;
				}
				.acquiescence{
					background-color: #ffffff;
					border-radius: 12rpx;
					border: solid 1rpx rgba(37, 39, 72, 0.3);
				}
			}
		}
		
		.common-box{
			.detail{
				width: 450rpx;
			}
			.right-box{
				// line-height: 90rpx;
				// height: 90rpx;
				padding: 32rpx 0;
			}
			.l-title{
				height: 90rpx;
				width: 152rpx;
				line-height: 90rpx;
			}
			image{
				width: 32rpx;
				height: 32rpx;
			}
			.arrows_icon{
				width: 44rpx;
				height: 44rpx;
			}
			.right-padding{
				padding: 26rpx 0;
			}
		}
		
		.btn-box{
			width: 100%;
			margin-top: 40rpx;
			.btn{
				padding: 0 48rpx;
				background-image: linear-gradient(270deg, 
					#7f4aff 0%, 
					#9254ff 100%);
				border-radius: 16rpx;
				line-height: 92rpx;
				color: white;
			}
		}
	}
}

//授课语种弹出层
.commonPopup{
	width: 750rpx;
	background-color:white;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	.title{
		padding: 26rpx 0;
		border-bottom: 1rpx solid #f8f8f8;
		position: relative;
		image{
			position: absolute;
			right: 48rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}
	.item{
		height: 100rpx;
		padding: 0 48rpx;
		border-bottom: 1rpx solid #f8f8f8;
		image{
			width: 44rpx;
			height: 44rpx;
		}
	}
	.cancel{
		line-height: 112rpx;
		border-top: 16rpx solid #f4f4f4;
	}
}
</style>
